<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>新闻信息管理系统</title>
    <link rel="stylesheet" href="view/assets/css/bootstrap.min.css">
    <script src="view/assets/js/html5shiv.min.js"></script>
    <script src="view/assets/js/respond.min.js"></script>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .line-limit-length {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap; //文本不换行，这样超出一行的部分被截取，显示...
    }
</style>
<body>
<!--导航栏-->
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" style="margin: auto;" href="index.php">新闻信息管理系统</a>
            <a class="navbar-brand" style="margin: auto; font-size: 15px;" href="index.php">首页</a>
            <a class="navbar-brand" style="margin: auto; font-size: 15px;" href="showallarticle.php">文章</a>
            <a class="navbar-brand" style="margin: auto;font-size: 15px;" href="about.php">关于</a>
        </div>
        <!--跳转后台登录按钮-->
        <div id="navbar" class="navbar-collapse collapse">
            <form class="navbar-form navbar-right">
                <a type="button" class="btn btn-success" href="admin.php">登录后台</a>
            </form>
        </div>
    </div>
</nav>
<!--主体部分-->
<div class="jumbotron text-center">
    <div style="margin: 20px;">
        <p>新闻信息管理系统</p><p>基于Bootstrap + PHP + Mysql</p>
    </div>
</div>
<div class="container" style="margin-top:30px">
    <div class="row">
        <div class="col-sm-2">
            <div>
                <div class="page-header">
                    <h4  style="text-align: center;">文章栏目 <small>查看文章分类</small></h4>
                </div>
                <div class="text-center">
                    <!--栏目内容-->
                    <?php foreach($cats as $c) {?>
                    <a class="btn btn-info" style="margin-top: 5px;" type="button" href="index.php?cat_id=<?php echo $c['cat_id']; ?>">
                        <span><?php echo $c['cat_name']; ?></span><span class="badge"><?php echo $c['cat_num'];?></span>
                    </a><br>
                    <?php } ?>
                    <div class="alert alert-success" role="alert">最多显示5个栏目<br><a href="showallarticle.php">查看更多</a></div>
                </div>
                <div class="page-header">
                    <h4  style="text-align: center;">最新评论</h4>
                </div>
                <!--评论列表显示最近5条-->
                <?php foreach($comments as $comm) {?>
                <div class="panel panel-default">
                    <div class="panel-body">
                        <p class="line-limit-length"><?php echo $comm['content']?></p>
                    </div>
                </div>
                <?php } ?>
            </div>
        </div>
        <div class="col-sm-7">
            <div>
                <div class="page-header">
                    <h4 style="text-align: center;">文章列表<small>查看最新文章</small></h4>
                </div>
                <div class="article">
                    <!--文章部分-->
                    <?php  foreach($arts as $a)  {  ?>
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-sm-4">
                                    <?php  if ($a['thumb']) { ?>
                                    <img style="float: left;" src="./<?php echo $a['thumb']; ?>" width="170px;" height="120px;">
                                    <?php  } ?>
                                </div>
                                <div class="col-sm-8"><a href="art.php?art_id=<?php echo $a['art_id'];?>" style="font-size: 30px;"><?php echo $a['title'];  ?></a>
                                    <p class="line-limit-length"><?php echo $a['content']; ?></p>
                                    <span>作者:<?php echo $a['author'];?></span>&nbsp&nbsp&nbsp<span style="left: 20px;">评论  <span class="badge"><?php echo $a['comm'];?></span>  </span>&nbsp&nbsp<span>分类：<?php echo $a['cat_name'];?></span><a href="art.php?art_id=<?php echo $a['art_id'];?>" style="float: right;">查看详情</a></div>
                            </div>
                        </div>
                    </div>
                    <?php }?>
                </div>
                <!--分页部分-->
                <div style="text-align: center;">
                    <nav aria-label="Page navigation">
                        <ul class="pagination">
                            <?php if ($page) {?>
                            <?php foreach($page as $k=>$v){ ?>
                            <li><a class="btn btn-info" href="index.php?<?php echo $v;?>"><?php echo $k;?></a></li>
                            <?php } }?>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
        <div class="col-sm-2">
            <div>
                <div class="page-header">
                    <h4 style="text-align: center;">其他</h4>
                </div>
                <!--搜索框-->
                <form action="search.php" method="post">
                <div class="input-group">
                    <input id="search" name="search" type="text" class="form-control" placeholder="根据文章标题搜索">
                    <span class="input-group-btn">
                    <button class="btn btn-default" type="submit">搜索</button>
                    </span>
                </div><!-- /input-group -->
                </form>
                <!--热门文章-->
                <div class="page-header">
                    <h4 style="text-align: center;">热门文章</h4>
                </div>
                <div class="panel panel-default">
                    <div class="alert alert-info text-center" role="alert">热门文章按照评论数排序</div>
                    <div class="panel-body text-center">
                        <?php foreach ($hotarts as $h) {?>
                        <p class="line-limit-length"><a href="art.php?art_id=<?php echo $a['art_id'];?>"><?php echo $h['title']; ?></a></p><br>
                        <?php }?>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--底部内容-->
<div class="jumbotron text-center" style="margin-bottom:0">
    <p>Copyright © 2020-2021 用于数据库实践</p>
</div>
<script src="view/assets/js/jquery.min.js"></script>
<script src="view/assets/js/bootstrap.min.js"></script>
</body>
</html>
